<template>
	<view class="tbody">
    <view v-for="(item,index) in informationList" class="information" @click="active(item)">
      <view class="information-left" :class="item.modelState">
        {{item.modelName}}
        <view v-if="item.isRead === 'N'" class="unread">

        </view>
      </view>
      <view class="information-right">
        <view class="information-right-one">
          <text class="text">{{item.title}}</text>
          <!-- <text class="time">{{item.createTime}}</text> -->
        </view>
        <view class="information-right-two">
          {{item.content}}
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
    data() {
      return {
        informationList: [],
		total:10,
		page_data : {
			pageNum: 1,
			pageSize:10
		}
      };
    },
    onShow() {
      uni.$http.get('/business/messageNotification/listNoRead').then((res => {
        this.informationList = res.data.rows
        for (let i = 0; i < this.informationList.length; i++) {
          this.informationList[i].content = this.informationList[i].content.replace(/<\/p><p>/g,"   "); // 每段p标签中间加段空格
          this.informationList[i].content = this.informationList[i].content.replace(/<[^>]*>/g, "");
          switch (this.informationList[i].modelName){
            case '活动':
              this.informationList[i].modelState = 'activity'
              break;
            case '学习':
              this.informationList[i].modelState = 'study'
              break;
            case '通知':
              this.informationList[i].modelState = 'inform'
              break;
            case '公告':
              this.informationList[i].modelState = 'announcement'
              break;
          }
        }
		this.total = res.data.total
		this.page_data = {
			pageNum: 1,
			pageSize:10
		}
      }))
    },
	// 上拉加载
	onReachBottom(){
		//触发了上拉加载，请求下一页（10）条数据
		let  allTotal = this.page_data.pageNum * this.page_data.pageSize
		if(allTotal < this.total){
			// 判断当前条数小于总条数
			this.getInformPage()
		}else{
			uni.showToast({
				title:'已加载全部数据',
				icon:'none'

			})
		}

	},
    methods:{
		// page分页 获取数据
		async getInformPage(){
			this.page_data.pageNum++
			const res = await uni.$http.get('/business/messageNotification/listNoRead',{params:this.page_data})
			if(res.data.code == 200){
				 //新数据push到列表中
				const newlist = res.data.rows
        for (let i = 0; i < newlist.length; i++) {
          newlist[i].content = newlist[i].content.replace(/<\/p><p>/g,"   "); // 每段p标签中间加段空格
          newlist[i].content = newlist[i].content.replace(/<[^>]*>/g, "");
          switch (newlist[i].modelName){
            case '活动':
              newlist[i].modelState = 'activity'
              break;
            case '学习':
              newlist[i].modelState = 'study'
              break;
            case '通知':
              newlist[i].modelState = 'inform'
              break;
            case '公告':
              newlist[i].modelState = 'announcement'
              break;
          }
        }
				this.informationList.push(...newlist)
			}else{
				uni.showToast({
					title:res.data.msg,
					icon: 'none'
				})
			}
		},
      active(item){
        // 消息设置已读
        uni.$http.get('/business/messageNotification/changeReadYes/' + item.id)
        if (item.modelName === '学习'){
			    uni.navigateTo({
			      url: '../studyDetails/studyDetails?id='+item.mid
			    })
        }else{
          uni.navigateTo({
            url: '../activityDetails/activityDetails?id='+item.mid
          })
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
	.tbody{
		padding-top: 32rpx !important;
	}
	.information{
		opacity: 1;
		border-radius: 20rpx;
		background: #F5FDFF;
		box-shadow: 0px 0px 1rpx 0px #16C1DB;
		display: flex;
		justify-content: space-between;
		padding: 32rpx 24rpx;
		margin-bottom: 24rpx;
    .study{
      background-image: url('/static/images/圆形 1@2x (1).png')
    }
    .activity{
      background-image: url('/static/images/圆形 1@2x (2).png')
    }
    .inform{
      background-image: url('/static/images/圆形 1@2x (1).png')
    }
    .announcement{
      background-image: url('/static/images/圆形 1@2x (2).png')
    }
		.information-left{
			position: relative;
			// margin-right: 22rpx;
			width: 80rpx;
			height: 80rpx;
			background-size: 80rpx 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(67, 207, 124, 1);
			.unread{
				position: absolute;
				top: 0;
				right: 0;
				width: 16rpx;
				height: 16rpx;
				background-color: #FF5733;
				border-radius: 50%;
			}
		}
		.information-right{
			.information-right-one{
				display: flex;
				justify-content: space-between;
				vertical-align: bottom;
				margin-bottom: 18rpx;
				.text{
					width: 440rpx;
					height: 32rpx;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 32rpx;
					color: rgba(20, 58, 64, 1);
					text-align: left;
					  display: -webkit-box;
					  -webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
					  -webkit-line-clamp: 1; /* 限制文本的行数，表示文本第多少行省略 */
					  text-overflow: ellipsis;/*  打点展示 */
					  overflow: hidden;/*超出部分进行隐藏*/

				}
				.time{
					width: 86rpx;
					height: 20rpx;
					opacity: 0.3;
					font-size: 16rpx;
					font-weight: 400;
					line-height: 20rpx;
					color: rgba(20, 58, 64, 1);
					text-align: left;
					line-height: 50rpx;
				}
			}
			.information-right-two{
				width: 518rpx;
				height: 32rpx;
				opacity: 0.3;
				/** 文本1 */
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(20, 58, 64, 1);
				text-align: left;
				vertical-align: top;
				display: -webkit-box;
				-webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
				-webkit-line-clamp: 1; /* 限制文本的行数，表示文本第多少行省略 */
				text-overflow: ellipsis;/*  打点展示 */
				overflow: hidden;/*超出部分进行隐藏*/
			}
		}
	}
</style>
